<template>
  <ArtSearchBar ref="searchBarRef" v-model="formData" :items="formItems" :rules="rules" @reset="handleReset"
    @search="handleSearch" />
</template>

<script setup lang="ts">
interface Props {
  modelValue: Record<string, any>
}
interface Emits {
  (e: 'update:modelValue', value: Record<string, any>): void
  (e: 'search', params: Record<string, any>): void
  (e: 'reset'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 双向绑定
const searchBarRef = ref()
const formData = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

// 校验规则（可按需扩展）
const rules = {}

// 表单配置
const formItems = computed(() => [
  {
    label: '类型编码',
    key: 'type_code',
    type: 'input',
    placeholder: '请输入类型编码',
    clearable: true
  },
  {
    label: '类型名称',
    key: 'type_name',
    type: 'input',
    placeholder: '请输入类型名称',
    clearable: true
  },
  {
    label: '关键字',
    key: 'keyword',
    type: 'input',
    placeholder: '关键字搜索',
    clearable: true
  }
])

// 事件
function handleReset() {
  emit('reset')
}

async function handleSearch() {
  emit('search', formData.value)
}
</script>

<style lang="scss" scoped></style>